<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>数据看板</span>
          </div>
          <el-row>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  员工总数
                </div>
                <div class="unit-content">
                  <count-to :start-val="0" :end-val="generalData.totalUserNum" :duration="1500" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  已验证员工数
                </div>
                <div class="unit-content">
                  <count-to :start-val="0" :end-val="generalData.verifyUserNum" :duration="1600" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  各类申请数
                </div>
                <div class="unit-content">
                  <count-to :start-val="0" :end-val="generalData.applyNum" :duration="1700" />
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  订单总量
                </div>
                <div class="unit-content">
                  <count-to :start-val="0" :end-val="generalData.orderNum" :duration="1800" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  商品种数
                </div>
                <div class="unit-content">
                  <count-to :start-val="0" :end-val="generalData.productNum" :duration="1900" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  帖子总数
                </div>
                <div class="unit-content">
                  <count-to :start-val="0" :end-val="generalData.issueNum" :duration="2000" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>待处理事项</span>
          </div>
          <el-row>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  待支付订单
                </div>
                <div class="unit-content-todo">
                  <count-to :start-val="0" :end-val="todoData.orderToPay" :duration="2100" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  待发货订单
                </div>
                <div class="unit-content-todo">
                  <count-to :start-val="0" :end-val="todoData.orderToDelivery" :duration="2200" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  待审核申请
                </div>
                <div class="unit-content-todo">
                  <count-to :start-val="0" :end-val="todoData.applyToHandle" :duration="2300" />
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  找回账号
                </div>
                <div class="unit-content-todo">
                  <count-to :start-val="0" :end-val="todoData.forgetToHandle" :duration="2400" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  待审核帖子
                </div>
                <div class="unit-content-todo">
                  <count-to :start-val="0" :end-val="todoData.issueToPass" :duration="2500" />
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statics-unit">
                <div class="unit-title">
                  待审核回帖
                </div>
                <div class="unit-content-todo">
                  <count-to :start-val="0" :end-val="todoData.postToPass" :duration="2600" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="10">
        <el-card style="height: 480px">
          <div slot="header">
            <span>订单类型分布</span>
          </div>
          <div class="chart-wrapper">
            <pie-chart />
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card style="height: 480px">
          <div slot="header">
            <span>近期热门帖子</span>
          </div>
          <div style="padding-top: 0">
            <el-table :data="hotIssueList" style="width: 100%">
              <el-table-column label="编号" width="120" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.issueId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="标题" min-width="200" align="center">
                <template slot-scope="{row}">
                  {{ row.issueTitle }}
                </template>
              </el-table-column>
              <el-table-column label="类型" width="120" align="center">
                <template slot-scope="{row}">
                  <el-tag v-if="row.issueType===1" type="success" size="mini">生活论坛</el-tag>
                  <el-tag v-if="row.issueType===2" type="primary" size="mini">文体联盟</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="回帖数" width="120" align="center">
                <template slot-scope="{row}">
                  {{ row.postNum }}
                </template>
              </el-table-column>
              <el-table-column label="发帖时间" width="180" align="center">
                <template slot-scope="{row}">
                  {{ row.createTime }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getGeneralStatics, getHotIssues, getTodoStatics } from '@/api/dashboard'
import PieChart from '@/views/dashboard/admin/components/PieChart'
import CountTo from 'vue-count-to'

export default {
  name: 'DashboardAdmin',
  components: {
    CountTo,
    PieChart
  },
  data() {
    return {
      generalData: {
        totalUserNum: 0,
        verifyUserNum: 0,
        orderNum: 0,
        productNum: 0,
        applyNum: 0,
        issueNum: 0
      },
      todoData: {
        orderToPay: 0,
        orderToDelivery: 0,
        applyToHandle: 0,
        forgetToHandle: 0,
        issueToPass: 0,
        postToPass: 0
      },
      hotIssueList: []
    }
  },
  created() {
    this.getGeneralStatics()
    this.getTodoStatics()
    this.getHotIssues()
  },
  methods: {
    getGeneralStatics() {
      getGeneralStatics().then(response => {
        this.generalData = response.data
      })
    },
    getTodoStatics() {
      getTodoStatics().then(response => {
        this.todoData = response.data
      })
    },
    getHotIssues() {
      getHotIssues().then(response => {
        this.hotIssueList = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .statics-unit {
    height: 90px;
    margin: 15px;
    font-weight: bold;
  }
  .unit-title {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }
  .unit-content {
    font-size: 20px;
    color: rgba(50, 50, 190, 0.65);
    text-align: center;
    margin-top: 30px;
  }
  .unit-content-todo {
    font-size: 20px;
    color: rgba(240, 50, 50, 0.65);
    text-align: center;
    margin-top: 30px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
